<!--
 * @Description: useIntersectionObserver（可视区域加载）
 * @Author: r_yuesheng
 * @Date: 2022-12-23 16:30:28
 * @LastEditTime: 2022-12-28 10:50:03
 * @LastEditors: r_yuesheng
-->
<template>
  <div>
    <el-tabs type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="只监听一次">
        <div style="height:400px;overflow-y:scroll;background: #e5e5e5;">
          <div :ref="'observerOnce'+index" v-for="(item,index) in listData" :key="index" style="height:360px;padding:40px">{{ item }}</div>
        </div>
        <div class="bold mt20 fs18">当前火车已开到：{{ content }}</div>
      </el-tab-pane>
      <el-tab-pane label="持续监听模式">
        <div style="height:400px;overflow-y:scroll;background: #e5e5e5;">
          <div :ref="'observer'+index" v-for="(item,index) in listData" :key="index" style="height:360px;padding:40px">{{ item }}</div>
        </div>
        <div class="bold mt20 fs18">当前火车已开到：{{ content }}</div>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>
<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue';
import { useLazyData } from './hook.js';
export default {
  name: '',
  props: {},
  components: {},
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance();
    function initState() {
      return {
        listData: ['北京站', '郑州站', '武汉站', '广州站'],
        content: '',
      };
    }
    const state = reactive(initState());
    onMounted(() => {
      handleTabClick({ index: '0' });
    });
    function handleTabClick(val) {
      if (val.index === '0') {
        state.listData.forEach((item, index) => {
          useLazyData(proxy.$refs['observerOnce' + index][0], null, false, () => {
            state.content = item;
          });
        });
      } else {
        state.listData.forEach((item, index) => {
          useLazyData(proxy.$refs['observer' + index][0], null, true, () => {
            state.content = item;
          });
        });
      }
    }
    return {
      ...toRefs(state),
      handleTabClick,
    };
  },
};
</script>